<!-- pages/login/index.vue -->
<script setup>
  import { ref } from 'vue'

  // 登录方式组件
  import mobileLogin from './components/mobileLogin.vue'
  import passwordLogin from './components/passwordLogin.vue'

  // 登录方式
  const logintypeList = [
    { title: '密码登录', mobTitle: '验证码登录' },
    { title: '验证码登录', mobTitle: '密码登录' },
  ]

  // 登录方式初始值
  const loginType = ref(0)

  //切换登录方式
  function toggleLoginfn() {
    loginType.value = Math.abs(loginType.value - 1)
  }

  // qq登录
  // #ifdef H5
  function onQQbtnfn() {
    window.location.href = `https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=102015968&redirect_uri=http://consult-patients.itheima.net/pages/login/qq`
  }
  // #endif
</script>

<script>
  export default {
    options: {
      styleIsolation: 'shared',
    },
  }
</script>

<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ logintypeList[loginType].title }}</view>
      <view class="type" @click="toggleLoginfn">
        <text>{{ logintypeList[loginType].mobTitle }}</text>
        <uni-icons color="#3c3e42" type="forward" />
      </view>
    </view>

    <password-login v-if="loginType === 0"></password-login>
    <mobile-login v-else-if="loginType === 1"></mobile-login>
  </view>

  <!-- 社交账号登录 -->
  <view class="social-login">
    <view class="legend">
      <text class="text">其它方式登录</text>
    </view>
    <view class="social-account">
      <view class="icon" @click="onQQbtnfn">
        <uni-icons color="#00b0fb" size="30" type="qq" />
      </view>
      <view class="icon">
        <uni-icons color="#fb6622" size="30" type="weibo" />
      </view>
      <view class="icon">
        <uni-icons color="#07C160" size="30" type="weixin" />
      </view>
    </view>
  </view>
</template>

<style lang="scss">
  @import './index.scss';
</style>
